import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'index.dart';

class MessageIndexPage extends GetView<MessageIndexController> {
  const MessageIndexPage({super.key});

  // 主视图
  Widget _buildView() {
    return Column(
      children: [
        // 顶部分类区域
        _buildCategories(),
        
        // 消息列表
        Expanded(
          child: _buildMessageList(),
        ),
      ],
    );
  }

  // 构建消息分类
  Widget _buildCategories() {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 24.w, vertical: 16.h),
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border(
          bottom: BorderSide(
            color: const Color(0xFFF0F0F0),
            width: 1,
          ),
        ),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          _buildCategoryItem(
            icon: Icons.chat_bubble,
            label: '评论',
            color: const Color(0xFFFF9933),
            badge: 0,
          ),
          _buildCategoryItem(
            icon: Icons.notifications_outlined,
            label: '关注通知',
            color: const Color(0xFF6666FF),
            badge: 0,
          ),
          _buildCategoryItem(
            icon: Icons.notifications,
            label: '系统通知',
            color: const Color(0xFF66CC99),
            badge: 1,
          ),
          _buildCategoryItem(
            icon: Icons.campaign,
            label: '官方消息',
            color: const Color(0xFFFF6666),
            badge: 0,
          ),
        ],
      ),
    );
  }

  // 构建分类项
  Widget _buildCategoryItem({
    required IconData icon,
    required String label,
    required Color color,
    int badge = 0,
  }) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Stack(
          clipBehavior: Clip.none,
          children: [
            // 圆形图标容器
            Container(
              width: 50.w,
              height: 50.h,
              decoration: BoxDecoration(
                color: color,
                shape: BoxShape.circle,
              ),
              child: Icon(
                icon,
                color: Colors.white,
                size: 26.r,
              ),
            ),
            // 角标
            if (badge > 0)
              Positioned(
                right: -2.w,
                top: -2.h,
                child: Container(
                  padding: EdgeInsets.all(2.r),
                  decoration: const BoxDecoration(
                    color: Color(0xFFFF3333),
                    shape: BoxShape.circle,
                  ),
                  constraints: BoxConstraints(
                    minWidth: 16.w,
                    minHeight: 16.h,
                  ),
                  child: Center(
                    child: Text(
                      badge.toString(),
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 9.sp,
                        fontWeight: FontWeight.bold,
                        height: 1.0,
                      ),
                    ),
                  ),
                ),
              ),
          ],
        ),
        SizedBox(height: 8.h),
        Text(
          label,
          style: TextStyle(
            fontSize: 11.sp,
            color: const Color(0xFF333333),
          ),
        ),
      ],
    );
  }

  // 构建消息列表
  Widget _buildMessageList() {
    return Obx(() {
      if (controller.messageList.isEmpty) {
        return _buildEmptyView();
      }

      return ListView.builder(
        padding: EdgeInsets.zero,
        itemCount: controller.messageList.length,
        itemBuilder: (context, index) {
          final message = controller.messageList[index];
          return _buildMessageItem(message);
        },
      );
    });
  }

  // 构建空视图
  Widget _buildEmptyView() {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(
            Icons.inbox_outlined,
            size: 80.r,
            color: Colors.grey[300],
          ),
          SizedBox(height: 16.h),
          Text(
            '暂无消息',
            style: TextStyle(
              fontSize: 14.sp,
              color: Colors.grey[500],
            ),
          ),
        ],
      ),
    );
  }

  // 构建消息项
  Widget _buildMessageItem(MessageItem message) {
    return InkWell(
      onTap: () => controller.onMessageTap(message),
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 12.h),
        decoration: BoxDecoration(
          color: Colors.white,
          border: Border(
            bottom: BorderSide(
              color: const Color(0xFFF0F0F0),
              width: 1,
            ),
          ),
        ),
        child: Row(
          children: [
            // 头像
            ClipOval(
              child: Image.network(
                message.avatar,
                width: 48.w,
                height: 48.h,
                fit: BoxFit.cover,
                errorBuilder: (context, error, stackTrace) {
                  return Container(
                    width: 48.w,
                    height: 48.h,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: Colors.grey[300],
                    ),
                    child: Icon(
                      Icons.person,
                      color: Colors.grey,
                      size: 24.r,
                    ),
                  );
                },
              ),
            ),
            SizedBox(width: 12.w),
            // 内容区域
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        message.name,
                        style: TextStyle(
                          fontSize: 15.sp,
                          fontWeight: FontWeight.w600,
                          color: const Color(0xFF1D1D1F),
                        ),
                      ),
                      Text(
                        message.time,
                        style: TextStyle(
                          fontSize: 11.sp,
                          color: const Color(0xFF999999),
                        ),
                      ),
                    ],
                  ),
                  SizedBox(height: 4.h),
                  Text(
                    message.content,
                    style: TextStyle(
                      fontSize: 13.sp,
                      color: const Color(0xFF666666),
                    ),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ],
              ),
            ),
            if (message.unreadCount > 0) ...[
              SizedBox(width: 8.w),
              Container(
                padding: EdgeInsets.symmetric(horizontal: 6.w, vertical: 2.h),
                decoration: BoxDecoration(
                  color: const Color(0xFFFF4D4F),
                  borderRadius: BorderRadius.circular(10.r),
                ),
                child: Text(
                  message.unreadCount.toString(),
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 11.sp,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ],
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<MessageIndexController>(
      init: MessageIndexController(),
      id: "message_index",
      builder: (_) {
        return Scaffold(
          backgroundColor: const Color(0xFFF5F5F5),
          appBar: _buildAppBar(),
          body: _buildView(),
        );
      },
    );
  }

  // 构建AppBar（嵌入状态栏）
  PreferredSizeWidget _buildAppBar() {
    return AppBar(
      backgroundColor: Colors.white,
      elevation: 0,
      systemOverlayStyle: const SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        statusBarIconBrightness: Brightness.dark,
        statusBarBrightness: Brightness.light,
      ),
      title: Text(
        '消息',
        style: TextStyle(
          fontSize: 18.sp,
          fontWeight: FontWeight.w600,
          color: const Color(0xFF1D1D1F),
        ),
      ),
      centerTitle: true,
    );
  }
}
